<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>

<!-- 1. script标签，注意类型必须是 text/x-template -->
<!-- <script type="text/x-template" id="cpn">
    <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈哈</p>
    </div>
</script> -->

<!-- 2.使用template标签，注意id -->
<template id="cpn">
    <div>
        <h2>{{title}}</h2>
        <p>我是内容，呵呵呵呵呵</p>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>

    // 注册组件
    Vue.component('cpn', {
        template: '#cpn',
        data() {
            return {
                title: 'abc'
            }
        },
    })

    const app = new Vue({
        el: '#app',
        data: {
            message: "Hello Vue！"
        }
    })
</script>
</body>
</html>